fix: testimonial section consistency across product pages #2584

AbhiVarde · 2025-11-10T03:17:23Z

What does this PR do?

Problem

Testimonials sections across product pages had multiple inconsistencies creating a fragmented user experience:

Functions Page:

Inconsistent spacing (4px gaps vs 8px)
Different testimonial images (e.g., k-collect.png vs ryan-oconner.png)
Non-responsive cards on mobile (fixed w-lg)
Taller cards (60 units vs 52 units)
Animation hover syntax error

Auth, Storage & Sites Pages:

Variable card heights using h-fit with justify-center
No minimum height constraint

Solution

Standardized all testimonials components for unified design consistency across the website.

Changes Made

File: src/routes/products/functions/(components)/Testimonials.svelte

Updated testimonial images

<!-- Before -->
image: '/images/testimonials/k-collect.png'
image: '/images/testimonials/open-mind.png'
image: '/images/testimonials/shoefitter.png'

<!-- After -->
image: '/images/testimonials/ryan-oconner.png'
image: '/images/testimonials/david-forster.png'
image: '/images/testimonials/marius-bolik2.png'

Fixed spacing consistency (Line 47)

<!-- Before -->
gap-4 pl-4

<!-- After -->
gap-8 pl-8

Made cards responsive with consistent height

<!-- Before -->
class="flex min-h-60 w-lg flex-col justify-between..."

<!-- After -->
class="flex min-h-52 w-[90vw] flex-col justify-between... md:w-lg"

File: src/lib/components/product-pages/testimonials.svelte

Updated card height and layout

<!-- Before -->
class="flex h-fit w-[90vw] flex-col justify-center..."

<!-- After -->
class="flex min-h-52 w-[90vw] flex-col justify-between... md:w-lg"

File: src/lib/components/marketing/testimonials.svelte

Updated card height and layout

<!-- Before -->
class="flex h-fit w-[90vw] flex-col justify-center..."

<!-- After -->
class="flex min-h-52 w-[90vw] flex-col justify-between... md:w-lg"

Test Plan

✅ Tested on Chrome (latest versions)
✅ Tablet and desktop viewports
✅ Mobile viewports (< 768px) - Physical device: iPhone 15
✅ Verified consistent spacing, heights, and images across all product pages

Before

After

Before (Mobile)

After (Mobile)

Related PRs and Issues

Fixes #2583

Have you read the Contributing Guidelines on issues?

Yes, I have read and followed the contributing guidelines.

Summary by CodeRabbit

Release Notes

Style
- Improved testimonial card layouts with enhanced spacing and responsiveness across all viewport sizes
- Optimized horizontal testimonial scrollers with increased visual separation
- Updated testimonial imagery for better visual presentation
- Enhanced mobile-friendly design for improved user experience on smaller screens

- Unify card spacing and height across all product testimonial sections - Replace inconsistent images on Functions page with correct ones - Add min-height constraint for consistent layout - Improve responsiveness on mobile - Ensure visual and structural consistency across all product pages Fixes appwrite#2583

coderabbitai · 2025-11-10T03:18:03Z

Walkthrough

This pull request updates testimonial components across three Svelte files with consistent layout refinements. The changes replace fixed height constraints (h-fit) with minimum height containers (min-h-52) and adjust vertical content distribution from center-aligned to space-between alignment. Additionally, horizontal scrolling spacing is increased, card sizing becomes responsive with viewport-aware constraints, and image paths are updated in one component with specific contributor images.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Image path updates: Verify that three new contributor image paths in src/routes/products/functions/(components)/Testimonials.svelte reference valid, existing assets
Responsive layout changes: Confirm that the new responsive sizing constraints (w-[90vw] with md:w-lg breakpoint) maintain proper layout across mobile and desktop viewports
Visual spacing: Ensure increased horizontal gap (gap-8) and padding (pl-8) do not create unintended whitespace or overflow issues in the horizontal scroller
Content distribution: Verify that justify-between spacing works correctly with variable-length testimonial content without excessive gaps

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly and clearly describes the main change: standardizing testimonial section consistency across product pages, which matches the primary objective of the PR.
Linked Issues check	✅ Passed	The PR successfully addresses all coding requirements from issue #2583: consistent gaps (gap-4→gap-8), uniform minimum height (min-h-52), identical images across pages, and responsive cards (w-[90vw] md:w-lg).
Out of Scope Changes check	✅ Passed	All changes are directly scoped to the linked issue #2583: spacing adjustments, card height standardization, image updates, and responsive design improvements. No unrelated modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ce72079 and 13e87ec.

📒 Files selected for processing (3)

src/lib/components/marketing/testimonials.svelte (1 hunks)
src/lib/components/product-pages/testimonials.svelte (1 hunks)
src/routes/products/functions/(components)/Testimonials.svelte (3 hunks)

🔇 Additional comments (5)

src/lib/components/product-pages/testimonials.svelte (1)

57-57: LGTM! Styling changes achieve consistency.

The updates correctly implement the PR objectives:

min-h-52 enforces uniform minimum height across all cards

justify-between distributes content evenly (quote at top, author info at bottom)

md:w-lg adds responsive width for desktop breakpoint

These changes align with the standardization goals.

src/lib/components/marketing/testimonials.svelte (1)

63-63: LGTM! Consistent styling applied.

The class changes mirror those in src/lib/components/product-pages/testimonials.svelte, ensuring uniform card behavior across all testimonial components.

src/routes/products/functions/(components)/Testimonials.svelte (3)

50-50: Spacing standardized to match other components.

The increased spacing (gap-8 and pl-8) aligns with the horizontal layout used in the other testimonial components, achieving visual consistency across product pages.

54-54: Card styling now consistent and responsive.

The changes successfully address all PR objectives:

min-h-52 replaces min-h-60 for uniform height across all components

w-[90vw] md:w-lg makes cards responsive on mobile (fixes the fixed w-lg issue)

justify-between ensures consistent vertical content distribution

These updates complete the standardization effort.

Also applies to: 80-80

6-6: Image paths verified and confirmed.

All referenced testimonial image files exist at the expected paths in static/images/testimonials/. The updates for consistency are validated.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

sara-k-48 · 2025-11-24T21:40:36Z

@HarshMN2345 could you review this? Thanks!

AbhiVarde · 2025-11-25T09:28:33Z

Thanks, @sara-k-48 ma’am! 🙂

HarshMN2345

Heyy @AbhiVarde , thanks for the contribution 👏🙌
I think the testimonials are intended to look like they did before, so we don’t need to enforce consistency here for now.
cc @ItzNotABug

AbhiVarde · 2025-11-26T12:14:17Z

Hey @HarshMN2345, totally understand! 🙏

Just to clarify, the goal wasn’t to enforce global consistency, but to fix a few UX issues I noticed:

On small screens, the testimonial cards stretch too wide, making the text harder to read.
Some testimonials used mismatched images for the same person.
The updated version (screenshots above) gives a cleaner, more readable layout on both mobile and desktop.

If the original layout is intentional, I’m happy to adjust but these fixes came from a usability perspective. Maybe worth a quick check with design to confirm what they prefer 😊

sara-k-48 requested a review from HarshMN2345 November 24, 2025 21:39

HarshMN2345 reviewed Nov 26, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: testimonial section consistency across product pages #2584

fix: testimonial section consistency across product pages #2584

Uh oh!

AbhiVarde commented Nov 10, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Nov 10, 2025 •

edited

Loading

Uh oh!

sara-k-48 commented Nov 24, 2025

Uh oh!

AbhiVarde commented Nov 25, 2025

Uh oh!

HarshMN2345 left a comment

Uh oh!

AbhiVarde commented Nov 26, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

fix: testimonial section consistency across product pages #2584

Are you sure you want to change the base?

fix: testimonial section consistency across product pages #2584

Uh oh!

Conversation

AbhiVarde commented Nov 10, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

Problem

Solution

Changes Made

Test Plan

Related PRs and Issues

Have you read the Contributing Guidelines on issues?

Summary by CodeRabbit

Release Notes

Uh oh!

coderabbitai bot commented Nov 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Estimated code review effort

Pre-merge checks and finishing touches

Uh oh!

sara-k-48 commented Nov 24, 2025

Uh oh!

AbhiVarde commented Nov 25, 2025

Uh oh!

HarshMN2345 left a comment

Choose a reason for hiding this comment

Uh oh!

AbhiVarde commented Nov 26, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

AbhiVarde commented Nov 10, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Nov 10, 2025 •

edited

Loading